<template>
  <div>
    <el-dialog :title="form.id == '' ? '添加角色' : '修改角色'" v-model="dialogVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-row class="list-tools">
      <el-card style="min-width: 100%">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-button type="primary" @click="openDialog" plain>
              <el-icon><Plus /></el-icon>
              添加角色
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row class="list-tab">
      <el-table :data="tableData" :show-overflow-tooltip="true" :header-cell-style="{ backgroundColor: '#f8f8f9' }">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="code" label="权限字符"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              @click="handleChange(scope.row)"
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tab-page">
        <el-pagination
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItem"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </el-row>
  </div>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getRoleList, addRole, updateRole, deleteRole } from '../api/system/sys_role'

  const dialogVisible = ref(false)
  const form = ref({
    id: '',
    name: '',
    code: '',
    status: '',
    authId: '',
    createTime: ''
  })
  const searchParams = ref({
    pageNum: 1,
    pageSize: 5
  })
  const totalItem = ref(0)
  const tableData = ref([])

  const getList = () => {
    getRoleList(searchParams.value).then(res => {
      if (res.data) {
        tableData.value = res.data.content
        totalItem.value = res.data.totalSize
      } else {
        ElMessage({
          type: 'error',
          message: res.msg
        })
      }
    })
  }
  const handleChange = row => {
    updateRole(row).then(res => {
      getList()
    })
  }

  const openDialog = () => {
    form.value = {}
    dialogVisible.value = true
  }

  const handleEdit = (index, row) => {
    dialogVisible.value = true
    form.value = row
  }
  const handleDelete = (index, row) => {
    deleteRole(row).then(res => {
      getList()
    })
  }

  const handleSubmit = () => {
    if (form.value.id) {
      updateRole(form.value).then(res => {
        getList()
      })
    } else {
      addRole(form.value).then(res => {
        getList()
      })
    }
    dialogVisible.value = false
  }
  onBeforeMount(() => {
    getList()
  })
</script>

<style scoped></style>
